<template>
<div>
    <div class="main_wrap" v-show="mainPageShow">
        <div class="content_wrap">
            <div class="device_info">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="name">设备名称</td>
                        <td style="line-height: 30px;">{{deviceInfo.deviceName}}<div v-if="deviceZb ==true" class="yjzb-class" @click="chooseTransfer">转办</div></td>
                    </tr>
                    <tr>
                        <td class="name">设备编号</td>
                        <td>{{deviceInfo.deviceCode}}</td>
                    </tr>
                    <tr>
                        <td class="name">所在部门</td>
                        <td>{{deviceInfo.departmentName}}</td>
                    </tr>
                    <tr>
                        <td class="name">部件</td>
                        <!-- <td v-if="componentName!=''">{{componentName}}</td>
                        <td v-else>{{componentInfo.name}}</td>  -->
                        <td >{{componentInfo.name}}</td>
                    </tr>
                    <tr>
                        <td class="name">分类</td>
                        <td>{{componentInfo.catName}}</td>
                    </tr>
                    <tr>
                        <td class="name">部件编号</td>
                        <td>{{componentInfo.code}}</td>
                    </tr>
                    <tr>
                        <td class="name">操作人</td>
                        <td>{{operator}}</td>
                    </tr>
                </table>
            </div>
            <div class="devide_line">
                <p>填写点巡检结果</p>
            </div>
            <div class="check_out">
                <p>
                    <group >
                        <popup-radio @on-hide='groupClick(spotChectResult)' title="点巡检结果" :options="spotChectResults" v-model="spotChectResult"></popup-radio>
                    </group>
                </p>
                <div class="describe_picture">
                    <div class="describe">
                        <p style="line-height:50px;">
                            <span><img style="width:3%;margin-right:5px;" src="../../assets/icon/star.png"></span>描述
                        </p>
                        <textarea rows="10" cols="20" @blur="recovery" placeholder="请输入点巡检标准" v-model.trim="text"></textarea>
                    </div>
                    <div class="shoot_picture">
                        <p style="line-height:50px;">
                            <!-- <span><img style="width:3%;margin-right:5px;" src="../../assets/icon/star.png"></span> -->
                            设备拍摄
                        </p>
                    </div>
                    <div class="imgList">
                        <div class="list">
                            <div class="imgBox" v-for="(item,index) in imgList" :key="index">
                                <img :src="item">
                                <img src="../../assets/icon/delect.png" class="delect" @click="delectImg(index)">
                            </div>
                            <div class="upload" v-if="imgList.length < 6">
                                <img src="../../assets/icon/upLoad.png">
                                <s-upload @model="onChange" />
                                <!-- <input type="file" @change="uploadImg" accept="image/*" capture="camera"> -->
                            </div>
                        </div>
                    </div>
                    <div v-transfer-dom>
                        <loading :show="loading" text="正在上传"></loading>
                    </div>
                    <div v-transfer-dom>
                        <toast v-model="uploadFalse" type="text" text="上传失败" :time="1000" width="20em"></toast>
                    </div>
                </div>
                <div class="choose_report">
                    <x-switch style="border-bottom :1px solid (255,255,255,0.4);" v-model="choose" title="是否上报工单"></x-switch> 
                </div>
            </div>
            <div class="report_work_sheet" v-show="choose">
                <div class="devide_line">
                    <p>上报工单</p>
                </div>
                <div style="padding-left:10px;padding-right:10px;border-bottom :1px solid (255,255,255,0.4);" @click="chooseCheckerPage">
                    <p class="chooseCheck">
                        <img style="width:3%;margin-right:5px;" src="../../assets/icon/star.png">选择负责人
                        <span style="float:right;margin-right:10px;">{{chooseChecker}}></span>
                    </p>
                </div>
                <div style="padding-left:10px;padding-right:10px;">
                     <p class="chooseCheck">
                    <!-- <img style="width:3%;margin-right:5px;" src="../../assets/icon/star.png"> -->
                    <!-- <span style="font-size:16px;color:#fff;">选择优先级11</span> -->
                    <group style="font-size:16px;color:#fff;">
                        <popup-radio title="选择优先级" :options="changePrioritys" v-model="changePriority"></popup-radio>
                    </group>
                    </p> 
                </div>
                <div class="work_sheet_decribe">
                    <p style="line-height:60px;"><span><img style="width:3%;margin-right:5px;" src="../../assets/icon/star.png"></span>描述</p>
                    <textarea rows="10" cols="20" placeholder="请输入工单描述" @blur="recovery" v-model.trim="sheetText"></textarea>
                </div>
            </div>
            <div class="button_wrap">
                <button class="submit_btn" @click="addCheckHistory">提交</button>
            </div>
            <!-- <shortcut-menu></shortcut-menu> -->
        </div>
    </div>
    <choose-checker :options="checkersOptions" v-show="chooseCheckerShow" @getCharger="chooseCharger"></choose-checker>
</div>
</template>
<script>
import { XHeader, Icon, Cell, Group,XInput, PopupPicker,PopupRadio, XSwitch,Loading,Actionsheet, TransferDom, Toast} from 'vux'
import ChooseChecker from "../pages/chooseChecker.vue";
import Upload from "../common/upload.vue";
import ShortcutMenu from "../../components/common/shortcut_menu.vue";
import qs from 'qs';

export default {
    components: {
        XHeader,
        Icon,
        Cell,
        Group,
        XInput,
        PopupPicker,
        PopupRadio,
        XSwitch,
        Loading,
        Actionsheet,
        Toast,
        "choose-checker":ChooseChecker,
        "s-upload":Upload,
        ShortcutMenu
    },
    directives: {
        TransferDom
    },
    data(){
        return {
            spotChectResult: '正常',
            spotChectResults: ['正常', '轻微故障', '中度故障','重故障'],
            choose:false,
            componentId:'',
            componentName:'',
          //上传图片列表
            imgList: [],
            uploadFalse: false,
            loading: false,
            componentInfo:{},
            deviceInfo:{},
            checkersOptions:{},
            chooseCheckerShow:false,
            mainPageShow: true,
            checkers:[],
            leader:'',
            sheetText:'',
            deviceId:'',
            departmentId:'',
            text:'',
            chooseChecker:'',
            url:'',
            departmentInfo:'',
            operator:'',
            changePriority:'一般',
            changePrioritys:['一般', '重要', '紧急'],
            changePriorityNum:0,
            deviceZb:'',
            checkId:'',
            status:null,
            params:{},
            userId:''
        }
    },
    methods:{
        recovery() {
            window.scroll(0, 0);
        },
      groupClick(type){
          let val = type;
          if(val=='中度故障'){
            this.choose = true;
            this.changePriority = '重要';
          }else if(val=='重故障'){
            this.choose = true;
            this.changePriority = '紧急';
          }else if(val=='轻微故障'){
            this.choose = true;
            this.changePriority = '一般';
          }else{
            this.choose = false;
            this.changePriority = '一般';
            this.choose = false;
          }
      },
      openCamera:function(){
          var camera = document.getElementsByClassName('camera_input')[0]
          camera.click()
      },
      getComponentInfo:function(){
          this.params = this.$route.query;
          this.deviceZb = this.params.zb;//sfzb
          // var queryData = this.$route.query.deviceInfo
          this.deviceId = this.params.deviceId
          this.checkId = this.params.id
          this.componentId = this.params.componentId
          this.departmentId = this.params.departmentId
          /* if(!!queryData.checkResult){
              this.status = queryData.checkResult
          }else{
              this.status = queryData.status
          }
          if(!!queryData.componentName){
              this.componentName = queryData.componentName
          }else{
              this.componentName = queryData.name
          } */
          
          this.loadComponentDetail(this.componentId);
          this.loadDeviceDetail(this.deviceId);
          this.$http(this.$API.getUserInfo, true).then((res) => {
            if(res){
                this.userId = res.id
                this.operator = res.name;
                this.$http(this.$API.getDepartmentCharger,{departmentId: res.department.id}, true).then((res)=>{
                    if(res.users.length > 0){
                        for(var item of res.users){
                            if(item.leader === 1){
                                this.leader = item.id;
                                this.chooseChecker = item.name;
                                break;
                            }
                        }
                    }
                    if(this.leader == this.userId){
                        this.leader = '';
                        this.chooseChecker = '';
                    }
                })
                }
            });
      },
      
    //   转办
      chooseTransfer: function(){
        this.$router.push({
            name: `chooseTransfer`,
            query:{
                departmentId: this.departmentId,
                checkId: this.checkId,
                type:'component',
                pageName:'addComponentCheck',
                params:this.params
            }
        })
      },

      onChange:function(fileUrl){
          this.uploadImg(fileUrl)
      },

      //上传图片
      uploadImg: function(fileUrl){
        let that = this;        
         let config = {
            withCredentials: true,
            headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
          }
        const options = {
          file:fileUrl
        }
        this.loading = true
        this.$axios.post(this.$API.upload,qs.stringify(options),config).then( (res) => {
          if(res.data.success){
            this.imgList.unshift(res.data.data);
            this.loading = false
          } else {
            this.loading = false;
            this.uploadFalse = true
          }
        }).catch(()=>{
          this.$commom.warning('图片上传失败，请重新选择');
          this.loading = false;
          this.uploadFalse = true
        });
      },
      //删除图片
      delectImg: function(index){
        this.imgList.splice(index,1);
      },
      click: function( key ){
        this.valueIndex = key;
      },

      
      //添加巡检记录
      addCheckHistory: function(){
        if(!!!this.text){
          this.$commom.alert('请输入点巡检标准');
          return;
        }
        
        if(this.choose == true && !!!this.leader){
            this.$commom.alert('无负责人，无法上报');
            return;
        }

        if(!!this.leader && this.leader == this.userId){
            this.$commom.alert('工单负责人不能选择自己，请选择其他负责人！');
            return;
        }
        // if(this.imgList.length <= 0){
        //   this.$commom.alert('请至少上传一张图片');
        //   return;
        // }
        if(this.spotChectResult == '正常'){
            this.valueIndex = 1
        }else
        if(this.spotChectResult == '轻微故障'){
            this.valueIndex = 2
        }else
        if(this.spotChectResult == '中度故障'){
            this.valueIndex = 3
        }else{
            this.valueIndex = 4
        }

        if(this.changePriority == '一般'){
            this.changePriorityNum = 1
        }else if(this.changePriority == '重要'){
            this.changePriorityNum = 2
        }else if(this.changePriority == '紧急'){
            this.changePriorityNum = 3
        }

        if(this.choose == true && !!!this.sheetText){
          this.$commom.alert('请输入工单描述');
          return;
        }

        if(this.choose == false){
            this.leader = '';
        }

        let data = {
          id:this.checkId,
          deviceId:this.deviceId,
        //   deviceId: (this.deviceId).toString(),
          description: this.text,
          pictures: this.imgList.join(','),
          checkResult: this.valueIndex,
          departmentId: this.departmentId,
          leaderId: this.leader,
          sheetType:1,
          sheetDescribe: this.sheetText,
          workSheetPriority: this.changePriorityNum,
          componentId: this.componentId,
          status: this.status
        };
        
        let that = this;

        if(this.choose == false){
            this.leader = '';
        }

        this.$http(this.$API.addCheckRecord,data,true).then( (res) => {
          if(res){
            this.$commom.alert('添加成功');
            this.$router.push({
                name: `componentCheck`,
                query: {
                deviceId:this.deviceId,
                }
            })
          }
        });
      },
      loadComponentDetail: function(params){
          var param = {
              id: params
          }
          this.$http(this.$API.inventDetail, param, true).then((res)=>{
            //   debugger
              this.componentInfo = res
          })
      },
      loadDeviceDetail: function(){
          this.$http(this.$API.loadDeviceInfo, {deviceId: this.deviceId}, true).then((res)=>{
            //   debugger
              this.deviceInfo = res
          })
      },

    // 调出部门领导
      chooseCheckerPage: function(){
          this.chooseCheckerShow = true;
          this.mainPageShow = false;
          this.checkersOptions = {
              checkers:this.checkers
          }
      },

    //   获取当前领导
      loadChecker: function(){
        this.$http(this.$API.getLeader, {},true).then((res)=>{
          this.checkers = res
        })
      },

    //   获取负责人
      chooseCharger: function(chargeId,checkerName){
          this.leader = chargeId;
          this.mainPageShow = true;
          this.chooseCheckerShow =false;
          this.chooseChecker = checkerName;
      },

      getDomin: function(){
        this.url = window.location.protocol +'//'+ window.location.host;
      },
    },
    created:function(){
        this.getComponentInfo();
        this.loadChecker();
        this.getDomin();
        this.departmentInfo = localStorage.getItem('curDepartment')
    },
}
</script>
<style  lang="less" scoped>
  .imgList{
      margin-bottom: 10px;
      .title{
        font-size: 14px;
        margin-bottom: 10px;
      }
      .list{
        display: flex;   
        img{
            width: 43px;
            height: 43px;
          }
        .imgBox{
          margin-right: 16px;
          position: relative;
          .delect{
            width: 13px;
            height: 12px;
            position: absolute;
            top: -6px;
            right: -6px;
          }
        }
        .upload{
          position: relative;
          input{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }
      }
    }
</style>
<style scoped>
    body{
        background-color: #22233f;
        height: 100%;
        width: 100%;
    }
    .main_wrap{
        background-color: #22233f;
        margin: 0 auto;
        height: 100vh;
        width: 100%;
        overflow-y: auto
    }
    .vux-header{
        background-color: #fff !important;
    }
    .vux-header-title{
        color: #000 !important;
    }
    .header{
        border-bottom: 2px solid #e6e6e6;
    }

    .content_wrap{
       text-align: left;
       overflow: auto;
    }
    .content_wrap .device_info{
        margin-top: 20px;
        margin-bottom: 20px;
        padding:0px 10px;
    }
    .device_info .yjzb-class{
        padding:0 10px;
        height: 28px;
        float: right;
        color:#456de6;
        text-align: center;
        line-height: 28px;
        border: 1px rgba(0, 102, 255, 1)solid;
    }
    table{
        width:100%;
        line-height: 40px;
        font-size: 14px;
        color:#fff;
    }
    /* table tr td{ border-bottom :1px solid #ffffff; } */
    table .name{
        color: rgba(255, 255, 255, 0.5);
        width: 25%;
    }

    .content_wrap .check_out{
        padding:0px 10px;
    }

    .content_wrap .check_out p{
        line-height: 40px;
        color: #fff;
        font-size: 16px;
    }
    .content_wrap .button_wrap{
        text-align: center;
        padding:20px 0px;
    }
    .submit_btn{
        height: 40px;
        width: 90%;
        border: 1px solid #456de6;
        font-size: 16px;
        color: #456de6;
        margin-top: 10px;
        border-radius: 20px;
        background-color: #22233f;
    }
    .devide_line{
        background-color: rgba(255, 255, 255, 0.2);
        height: 40px;
        padding:0px 10px;
        font-size: 16px;
        color:rgba(255, 255, 255, 0.8)
    }
    .devide_line p{
        line-height: 40px;
    }
    .check_out .weui-cells{
        background-color: #22233f!important;
        padding: 0px;
        margin-top: 0px;
    }
     .check_out .weui-cells:before{
         border-top: none !important;
    }
    .check_out .weui-cells::after{
         border-top-color: rgba(255, 255, 255, 0.4);
    }
    .check_out .describe{
        width: 100%;
    }
    .check_out .describe textarea{
        width: 100%;
        border: 1px solid;
        border-color: rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        background-color: #22233f;
        color:#fff;
    }
    .describe textarea::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        font-size: 16px;
    }

    .check_out .shoot_picture{
        margin-top: 10px;
    }
    .camera{
        height: 60px;
        width: 60px;
        text-align: left;
    }
    .check_out .describe_picture{
        border-bottom: 1px solid;
        border-color: rgba(255, 255, 255, 0.4)
    }

    .choose_report{
        padding:20px 0px;
        color:#fff;
        font-size:16px;
        
    }
    .report_work_sheet .weui-cells{
        background-color: #22233f;
        padding: 0px;
        margin-top: 10px;
        color:#fff;
        height:60px;
    }
    .report_work_sheet .weui-cells:before{
         border-top: none !important;
    }
    .report_work_sheet .selectPriority{
        width:140px;
        border-radius: 4px;
        margin-left: 100px;
        height:34px;
        background: #22233f;
        color: #fff;
    }
    .work_sheet_decribe{
        padding:0px 10px;
        color:#fff;
        font-size: 16px;
    }
    .work_sheet_decribe textarea{
        width: 100%;
        border: 1px solid;
        border-color: rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        background-color: #22233f;
        color:#fff;
    }
    .work_sheet_decribe textarea::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5);
        font-size: 16px;
    }
    .chooseCheck{
        line-height: 50px;
        color:#fff;
        font-size: 16px;
    }
    .vux-popup-dialog{
        z-index:999 !important;
    }
</style>


